import React, { useState } from 'react'
import { useEffect } from 'react';
/* 
  如果state的值是一个引用类型值,我们仍然不能直接修改这个值,而是通过set
  xxx的方式覆盖原有的值

*/
export default function App() {
  let [person, setPerson] = useState([{
    id: "001",
    name: "张三"
  }, {
    id: "002",
    name: "王五"
  }, {
    id: "003",
    name: "小明"
  }]);


  useEffect(() => {
    console.log("person改变了");
  }, [person])


  const addPerson = () => {
    setPerson([...person, { id: Date.now(), name: "XXXX" }])
  }

  return (
    <div>
      <button onClick={addPerson}>添加数据</button>
      <ul>
        {
          person.map(item => {
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
